<template>
  <div class="box">
    <button class="btn btn-primary btn-ghost btn-multiple-border-stroke">
   <div class="btn-borders-group">
     <div class="border-top"></div>
     <div class="border-right"></div>
     <div class="border-bottom"></div>
     <div class="border-left"></div>
   </div>
   <div class="btn-borders-group">
     <div class="border-top"></div>
     <div class="border-right"></div>
     <div class="border-bottom"></div>
     <div class="border-left"></div>
   </div>
   <div class="btn-borders-group">
     <div class="border-top"></div>
     <div class="border-right"></div>
     <div class="border-bottom"></div>
     <div class="border-left"></div>
   </div>
   <span class="btn-text">Start</span>
 </button>
  </div>
 </template>
 
 <script>
 export default {
 
 }
 </script>
 
 <style lang="scss" scoped>
 @import url(https://fonts.googleapis.com/css?family=Lato);
 
 .box{
   min-width: 700px;
   min-height: 300px;
   background-color: #222;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px 10px 0 10px;
 }
 
 .btn {
   --hue: 190;
   --ease-in-duration: 0.25s;
   --ease-out-duration: 0.65s;
   --ease-out-delay: var(--ease-in-duration);
   position: relative;
   padding: 1rem 3rem;
   font-size: 1rem;
   line-height: 1.5;
   color: white;
   text-decoration: none;
   background-color: hsl(var(--hue), 100%, 41%);
   border: 1px solid hsl(var(--hue), 100%, 41%);
   outline: transparent;
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
   transition: 0.25s;
 
   &:hover {
     background: hsl(var(--hue), 100%, 31%);
   }
 
   &-primary {
     --hue: 171;
   }
 
   &-ghost {
     color: hsl(var(--hue), 100%, 41%);
     background-color: transparent;
     border-color: hsl(var(--hue), 100%, 41%);
 
     &:hover {
       color: white;
     }
   }
 
   &-multiple-border-stroke {
     border-color: transparent;
 
     .btn-borders-group {
       position: absolute;
       top: 0;
       left: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       border: 1px solid hsla(var(--hue), 100%, 41%, 0.35);
 
       &:nth-child(1) {
         left: -8px;
         padding: 0 8px;
       }
 
       &:nth-child(2) {
         top: -8px;
         padding: 8px 0;
       }
 
       &:nth-child(3) {
         top: -4px;
         left: -4px;
         padding: 4px;
       }
 
       .border-top {
         position: absolute;
         top: 0;
         width: 100%;
         height: 1px;
         background: hsl(var(--hue), 100%, 41%);
         transform: scaleX(0);
         transform-origin: left;
       }
 
       .border-right {
         position: absolute;
         right: 0;
         width: 1px;
         height: 100%;
         background: hsl(var(--hue), 100%, 41%);
         transform: scaleY(0);
         transform-origin: bottom;
       }
 
       .border-bottom {
         position: absolute;
         bottom: 0;
         width: 100%;
         height: 1px;
         background: hsl(var(--hue), 100%, 41%);
         transform: scaleX(0);
         transform-origin: left;
       }
 
       .border-left {
         position: absolute;
         left: 0;
         width: 1px;
         height: 100%;
         background: hsl(var(--hue), 100%, 41%);
         transform: scaleY(0);
         transform-origin: bottom;
       }
 
       // when unhover, ease-in top, right; ease-out bottom, left
 
       .border-left {
         transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
       }
 
       .border-bottom {
         transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
       }
 
       .border-right {
         transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
       }
 
       .border-top {
         transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
       }
     }
 
     &:hover {
       color: hsl(var(--hue), 100%, 41%);
       background: transparent;
 
       .border-top,
       .border-bottom {
         transform: scaleX(1);
       }
 
       .border-left,
       .border-right {
         transform: scaleY(1);
       }
 
       // when hover, ease-in bottom, left; ease-out top, right
 
       .border-left {
         transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
       }
 
       .border-bottom {
         transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
       }
 
       .border-right {
         transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
       }
 
       .border-top {
         transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
       }
     }
   }
 }
 </style>